<template>
   <div class="tabs-box">
       <div :class="datas?'true-tabs':'fasle-tabs'" @click="change">
             <span>活动类型维度活动分析</span>
       </div>
        <div :class="datas?'fasle-tabs':'true-tabs'" @click="changes">
             <span>商业客户维度活动分析</span>
       </div>
   </div>
</template>

<script>
export default {
    props:{
        data:{
            type:Boolean,
            default: true
        }
    },
    data(){
        return{
            datas:this.data
        }
    },
    methods:{
        change(){
               this.datas = true 
               this.$emit('changeTabs',this.datas)
        },
        changes(){
                this.datas = false
               this.$emit('changeTabs',this.datas)
        }
    }

}
</script>

<style scoped>
.tabs-box{
   width: 100%;
   height: 3rem;
   display: flex;
   justify-content: space-between;
}
.true-tabs{
    width: 14rem;
    height: 100%;
    border: 1px solid var(--el-color-primary);
    font-size: 1.2rem;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color:var(--el-color-primary);
display: flex;
justify-content: center;
align-items: center;

border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.fasle-tabs{
 width: 14rem;
height: 100%;
border: 1px solid var(--el-color-text-9);
font-size: 1.2rem;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color:var(--el-color-text-9);
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}
</style>